<template>
  <main>
    <div class="title_name">
      美餐乐自选餐厅(环球都会店)
    </div>

    <md-field class="input_box">
      <md-input-item
        class="first_input"
        ref="input10"
        v-model="money"
        title="消费金额"
        placeholder="￥0.00"
        maxlength="6"
        align="right"
      ></md-input-item>
      <md-input-item
        ref="input10"
        v-model="discounts"
        title="不参与优惠金额"
        placeholder="￥0.00"
        maxlength="6"
        align="right"
      ></md-input-item>
    </md-field>

    <div class="beizhu">
      *请询问服务员后输入
    </div>
    <!-- <md-button @click="isKeyBoardShow=!isKeyBoardShow" class="numButton">和店员已确认，立即买单</md-button> -->
    <!-- <div v-if="money" class="paymoney">
      <span>实际付款(元)</span>
      <span class="red">{{rmb}}</span>
    </div>
    <md-button @click="isCashierhow=!isCashierhow" :disabled="!money">和店员已确认，立即买单</md-button> -->
    <md-number-keyboard
      v-model="isKeyBoardShow"
      ok-text="支付"
      @enter="onNumberEnter"
      @delete="onNumberDelete"
      @confirm="PayEnter"
    ></md-number-keyboard>
    <!-- <div class="md-example-display" v-show="isKeyBoardShow" v-text="number"></div> -->

    <md-cashier
      title="确认付款"
      v-model="isCashierhow"
      :payment-amount="'￥'+rmb"
      payment-title=''
      payment-describe="<em>订单信息<span>美餐乐自选餐厅(环球都会店)</span></em><em>付款方法<span>招商银行信用卡(4990)<b>></b></span></em>"
      :pay-button-text="payBtnText"
      @cancel="onCashierCancel"
      @pay="onCashierPay"
    ></md-cashier>
    
    <md-popup v-model="isPopupShow">
      <img src="../assets/submit.png" class="submitimg">
    </md-popup>
  </main>
</template>


<script>
import { NumberKeyboard, Popup, Button, InputItem, Field, Toast, Cashier } from 'mand-mobile'
export default {
  components: { 
    [Popup.name]: Popup,
    [Button.name]: Button, 
    [InputItem.name]: InputItem, 
    [Field.name]: Field, 
    [NumberKeyboard.name]: NumberKeyboard,
    [Cashier.name]: Cashier
  },
  data() {
    return {
      money: '',
      discounts: '',
      isPopupShow: false,
      isCashierhow: false,
      isKeyBoardShow: true,
      payBtnText: '立即付款',
    }
  },
  computed: {
    rmb() {
      return Number(this.money).toFixed(2)
    }
  },
  methods: {
    onNumberEnter(val) {
      this.money += val
    },
    onNumberDelete() {
      if (this.money === '') {
        return
      }
      this.money = this.money.substr(0, this.money.length - 1)
    },
    PayEnter() {
      this.isCashierhow = true
    },
    onCashierPay(item) {
      this.payBtnText = '身份验证中...'
      this.isPopupShow = true
      setTimeout(() => {
        this.isPopupShow = false
        this.payBtnText = '正在付款...'
      }, 2500)
      setTimeout(() => {
        this.$router.push({name: 'payResult', params: { money: this.rmb }} )
      }, 3500)
    },
    onCashierCancel() {
      this.isKeyBoardShow = true
    }
  }
}
</script>




<style lang="stylus">
main{
  width: 100%;
  background: #fff;
  margin-top: 24px;
  padding: 8px 30px;
  box-sizing: border-box;
}
body{
  background: #f5f5f8;
  padding: 0;
  margin: 0;
}
.title_name{
  font-size: 30px;
  color: #a5a5a5;
  line-height: 80px;
}
.input_box{
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 16px;
}
.first_input{
  border-bottom: 2px solid #e5e5e5;
}
.md-input-item-input{
  font-size 40px !important
}

.md-input-item-fake span:first-child{
  font-size: 60px;
}
.md-input-item .md-input-item-fake .md-input-item-fake-placeholder{
  font-size: 36px;
  color: #a5a5a5 !important;
}
.beizhu{
  font-size: 24px;
  color: #ccc;
  display: flex;
  line-height: 60px;
} 
.paymoney{
  display: flex;
  justify-content: space-between;
  font-size: 28px;
  border-top: 1px solid #e5e5e5;
  line-height: 100px;
  margin-bottom: 20px;
  .red{
    color: #fd6665;
    font-size: 60px;
  }
}
.md-input-item-title.fixed{
  width: 320px !important;
}
// 按钮
.md-button{
  margin-top: 30px;
  background: #fd6665 !important;
  height: 88px !important;
  line-height: 88px !important;
  border-radius: 12px !important;
}
.md-button.primary.disabled {
  color: #ffbbbb !important;
}
.numButton{
  position fixed !important;
  width: 92% !important;
  bottom 10%;
}
/* 键盘 */
// 字体大小
.md-number-keyboard-container{
  height 4.8rem !important;
}
.keyboard-number-item{
  height 1.2rem !important;
  line-height 1.2rem !important;
  font-size 60px !important;
  // font-weight bold
}
// 键盘点
.keyboard-number-item:nth-child(10){
  position: absolute !important;
  left: 25%;
  width: 50% !important;
  bottom: 0;
  font-weight: bold;
}
// 删除按钮
.keyboard-operate-item.delete{
  // top 0.57rem;
  background: url(../assets/delete.png) no-repeat !important;
  background-size: 100% !important;
  background-position-y: -2px !important;
}

.slidedown{
    position: absolute !important;
    right: -4px;
    z-index: 100;
    width: 25% !important;
    border-bottom: 2px solid #e8e8e8;
    display none
}

.md-number-keyboard-container{
  border-top: 1px solid #e5e5e5;
}
.keyboard-operate-item.confirm{
  flex: 1 !important;
  background: #4b8fdc !important;
}
.keyboard-number-item{
  color: #000 !important;
}
.keyboard-operate-item.delete:after{
  background: none !important;
}
/* 弹窗 */
.md-popup-title-bar{
  height: 88px !important;
  background: #fff url(../assets/quester.png) right 30px center no-repeat !important;
  background-size: 40px !important;
  .title-bar-left{
    width: 15% !important;
  }
  .title-bar-title{
    background: url(../assets/paylogo.png) 276px center no-repeat;
    background-size: 40px;
    text-indent: 30px;
    font-size: 32px !important;
  }

}
.choose-text{
  padding: 0 0 200px !important;
}  
.choose-text::before{
  display: none;
}  
.choose-describe{
  font-size: 28px;
  width: 90% !important;
  margin-left: 5%;
  font-size: 32px !important;
  line-height: 92px;
  em{
    font-style: normal;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    span{
      color: #000;
      b{
        color: #aaa;
        font-family: 'Georgia';
        font-size: 36px;
        margin-left: 16px;
      }
    }
  }
}
.md-cashier-block-btn{
  padding: 0 30px 30px !important;
}
.md-cashier-pay-button{
  background: #418bde !important;
}
.submitimg{
  width: 540px;
  border-radius: 24px;
}
/* 光标 */
.md-input-item .md-input-item-fake:after{
  border-top: 20px solid #1978e2;
}

</style>
